<template>
    <div>
        <div v-for="(section,index) in sections" :key="index">
            <!-- 根据view-type视图类型分块渲染 -->
            <SwiperCom v-if="section.view_type==='gallery'" :items="section.body.items"></SwiperCom>
            <!-- 分割线 -->
            <div v-if="section.view_type==='divider_line'" 
            :style="{height:section.body.line_height/100+'rem',backgroundColor:section.body.line_color}"></div>
            <!-- 自动填充 -->
            <CellsAutoFill 
            :body="section.body"
            v-if="section.view_type==='cells_auto_fill'"></CellsAutoFill>
            <div v-if="section.view_type==='list_three_type4'">list_three_type4</div>
        </div>
    </div>
</template>
<script>
    import {GetHomePage} from '@/api/mi'
    // 导入Swiepr
    import SwiperCom from './SwiperCom.vue'
    import CellsAutoFill from './CellsAutoFill.vue'
    export default {
        components:{
            SwiperCom, CellsAutoFill
        },
        data(){
            return {
                sections:[]
            }
        },
        props:{
            item:{
                type:Object,
                default(){return {}}
            }
        },
        created(){
            GetHomePage(this.item)
            .then(res=>{
                // 组件创建完，更新当前组件sections数据
                this.sections = res.data.data.data.sections;
                // console.log( res.data.data.data.sections,"频道分类")

            })
            .catch(err=>console.error(err))
        }
    }
</script>